<template>
  <a-spin :spinning="loading">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24"> </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        <a-button type="primary" icon="download" @click="handleExportXls('cs_course')">导出</a-button>
        <a-upload
          name="file"
          :showUploadList="false"
          :multiple="false"
          :headers="tokenHeader"
          :action="importExcelUrl"
          @change="handleImportExcel"
        >
          <a-button type="primary" icon="import">导入</a-button>
        </a-upload>
        <!-- 高级查询区域 -->
        <j-super-query
          :fieldList="superFieldList"
          ref="superQueryModal"
          @handleSuperQuery="handleSuperQuery"
        ></j-super-query>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down"/></a-button>
        </a-dropdown>
      </div>

      <!-- 课程List -->
      <div class="courseListContainer">
        <div v-for="(item, index) in dataSource2" :key="index" class="courseItem">
          <div>
            <div style="position: relative;">
              <div class="selectIcon">
                <a-checkbox :defaultChecked="true"> </a-checkbox>
              </div>
              <img
                :src="item.cover"
                style="object-fit: cover;width: 213px;height: 130px;border-radius: 3px 3px 0 0; "
              />
              <!-- 图片蒙层 -->
              <div class="mantle">
                <div style="display:flex;justify-content: center; align-items: center;height: 100%;">
                  <div style="display:flex;">
                    <a class="mantleItem"  :href="'/tls/rsmg/coursePreview/coursePreview?id=' + item.id "  >
                      <a-icon type="eye" />
                      <div>预览</div>
                    </a>
                    <a class="mantleItem">
                      <a-icon type="bar-chart" />
                      <div>统计</div>
                    </a>
                  </div>
                </div>
              </div>
              <div class="checkIcon  checkIconFalse">
                <a-checkbox @change="onCheckedChange($event, index)" :checked="false"> </a-checkbox>
              </div>
              <div class="checkIcon  checkIconTrue">
                <a-checkbox @change="onCheckedChange($event, index)" :checked="true"> </a-checkbox>
              </div>
            </div>

            <div>
              <div class="courseName">
                {{ item.name }}
              </div>
              <div style="color: #666;font-size: 12px;padding: 10px;">
                <span>{{ item.sectionNum }}小节 | {{ item.learnOfNum }}人学习</span>
                <span style="padding-left: 15px;color: crimson;">{{ item.level }}</span>

                <div style="margin-top: 10px;width: 193px;">
                  <a-icon type="team" />

                  <span style="padding: 0 3px;" v-for="(item2, index2) in item.personInChargeNames" :key="index2">{{
                    item2
                  }}</span>
                </div>
                <div style="margin-top: 10px;">
                  <span>{{ item.createTime }} </span>
                </div>
                <div style="display: flex;justify-content: space-between; margin-top: 10px; ">
                  <div class="editorItem" @click="handleEdit(item)"><a-icon type="edit" /> 编辑</div>
                  <div class="editorItem">
                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(item.id)">
                      <a-icon type="delete" /> 删除
                    </a-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div>
        <a-pagination
          v-model="current"
          v-bind="pagination"
          :total="ipagination.total"
          :pageSizeOptions="ipagination.pageSizeOptions"
          @showSizeChange="onShowSizeChange"
          @change="onChange"
        />
      </div>

      <cs-course-modal ref="modalForm" @ok="modalFormOk"></cs-course-modal>
    </a-card>
  </a-spin>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { columns } from './tableConfig'
import { getAction } from '@/api/manage'
import CsCourseModal from './modules/CsCourseModal'
import { getCourseById } from '@/api/courseManage'
export default {
  name: 'CsCourseList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    CsCourseModal
  },
  data() {
    return {
      description: 'cs_course管理页面',
      // disableMixinCreated: true,
      // ,
      // 表头
      columns,
      url: {
        list: '/cscourse/csCourse/list',
        delete: '/cscourse/csCourse/delete',
        deleteBatch: '/cscourse/csCourse/deleteBatch',
        exportXlsUrl: '/cscourse/csCourse/exportXls',
        importExcelUrl: 'cscourse/csCourse/importExcel'
      },
      pageInfo: {
        pageNo: 1,
        pageSize: 12
      },
      current: 1,
      select: [],
      pagination: {
        current: 1,
        selectedRowKeys: [],
        defaultPageSize: 12,
        showTotal: total => `共 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true
      },
      dictOptions: {},
      superFieldList: []
    }
  },
  watch: {
    dataSource(val) {
      const selectIcon = document.getElementsByClassName('selectIcon')
      const checkIconFalse = document.getElementsByClassName('checkIconFalse')
      const checkIconTrue = document.getElementsByClassName('checkIconTrue')
      if (selectIcon.length > 0) {
        for (let i = 0; i < selectIcon.length; i++) {
          selectIcon[i].style.display = 'none'
          checkIconFalse[i].style.display = 'block'
          checkIconTrue[i].style.display = 'none'
        }
      }
    }
  },
  created() {
    this.getSuperFieldList()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    dataSource2: function() {
      return this.dataSource.map(item => {
        this.select.push({
          isSelected: false
        })
        this[`checked${item.id}`] = false
        return {
          ...item,
          isSelected: false
        }
      })
    }
  },
  methods: {
    initDictConfig() {},
    handleEdit: async function(record) {
      const res = await getCourseById({ id: record.id })
      res.result.chapterRequestVMList = res.result.chapterRequestVMList.map(item => {
        item.csSectionList = item.csSectionList.map(items => {
          return {
            ...items,
            ids: items.id,
            isEdit: false
          }
        })
        return {
          ...item,
          ids: item.id,
          isEdit: false
        }
      })
      this.$refs.modalForm.edit(res.result)
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.disableSubmit = false
    },
    onCheckedChange(e, index) {
      e.stopPropagation()
      const selectIcon = document.getElementsByClassName('selectIcon')
      const checkIconFalse = document.getElementsByClassName('checkIconFalse')
      const checkIconTrue = document.getElementsByClassName('checkIconTrue')
      this.dataSource2[index].isSelected = !this.dataSource2[index].isSelected
      this.selectedRowKeys = this.dataSource2.filter(item => item.isSelected).map(item => item.id)
      if (this.dataSource2[index].isSelected) {
        selectIcon[index].style.display = 'block'
        checkIconFalse[index].style.display = 'none'
        checkIconTrue[index].style.display = 'block'
      } else {
        selectIcon[index].style.display = 'none'
        checkIconFalse[index].style.display = 'block'
        checkIconTrue[index].style.display = 'none'
      }
    },
    onShowSizeChange(current, pageSize) {
      this.pageInfo.pageNo = current
      this.pageInfo.pageSize = pageSize
      this.getData()
    },
    onChange(pageNumber) {
      this.current = pageNumber
      this.pageInfo.pageNo = pageNumber
      this.getData()
    },
    async getData() {
      this.loading = true
      const res = await getAction(this.url.list, this.pageInfo)
      this.dataSource = res.result.records || res.result
      if (res.result.total) {
        this.ipagination.total = res.result.total
      } else {
        this.ipagination.total = 0
      }
      this.loading = false
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'name', text: '课程名', dictCode: '' })
      fieldList.push({ type: 'string', value: 'cover', text: '课程封面的地址', dictCode: '' })
      fieldList.push({ type: 'string', value: 'level', text: '课程级别（VIP,免费）', dictCode: '' })
      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
@import './less/index.less';
</style>
